<template>
  <div class="box">
    <div class="title">v-model</div>
    <hr>
    <input :value="msg" @input="inputChange"/>
    <select name="选择器" :id="selectValue" @change="selectChange">
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
    <hr>
    <!-- v-model -->
     <input type="text" name="input" v-model="inputValue1" @input="inputChange1">
     <button @click="inputValue1 = '改变值'">改变值</button>
     <select name="选择器" v-model="selectValue" @change="selectChange">
        <option value="a">A</option>
        <option value="b">B</option>
      </select>
  </div>
</template>

<script setup>
import { ref } from "vue";
const msg = ref("Hello Vue 3!");
const selectValue = ref("")
const inputChange = (e) => {
  console.log(e);
  console.log(msg.value);
  
  msg.value = e.target.value;  
}

const selectChange = (e) => {
  console.log(e);
  console.log(selectValue.value);
}

const inputValue1 = ref('')
const inputChange1 = () => {
  console.log(inputValue1.value);
}
</script>
<!-- less -->
<style lang="scss" scoped>
.box {
  background-color: skyblue;
  .title {
    color: blue;
    font-size: 30px;
    font-weight: 700;
    &:hover {
      font-size: 40px;
    }
  }
  // .title:hover {
  //   font-size: 40px;
  // }
}
// .title {
//   color: red;
//   font-size: 30px;
// }
</style>